<template>
    <view class="page-content">
        <view class="containerV">
            <view class="headerV">
                <view class="top-tips1">
                    <view>请将正对手机，头部匹配摄像区域</view>
                </view>
                <view class="top-tips2">
                    为了便于识别认证，请拍摄本人头像
                </view>
            </view>

            <view class="contentV">
                <view class="mark"></view>
                <!-- <image v-if="tempImg" mode="widthFix" :src="tempImg" /> -->
                <camera v-if='isAuthCamera' :device-position="devicePosition ?'front': 'back'" class="camera"
                    flash="off" resolution='high' />
                <!-- <view v-show="!tempImg && tipsText" class="tipV">{{ tipsText }}</view> -->
                <view v-show="tipsText" class="tipV">{{ tipsText }}</view>
            </view>
            <view class="footerV">
                <view style="width: 100%;">
                    <!-- <view v-if="!tempImg" style="width: 100%;"> -->
                    <view class="privacyV">
                        <view class="icon"></view>
                        <view class="text">
                            照片隐私<text @click="handleJumpSecurityClick">安全保障</text>中…
                        </view>
                    </view>
                    <view class="bottom-tips-2">该照片仅作为你认证的凭证</view>
                    <view class="take-photo-bgV">
                        <!-- 切换镜头 -->
                        <view class="btn-change-camera" @click="handleChangeCameraClick">切换镜头</view>
                    </view>
                    <!--      </view>
                    <view class="confirmV" v-else>
                        <view class="btn-cancel" @click="handleCancelClick">
                            取消
                        </view>
                        <view class="btn-ok" @click="handleOkClick">
                            确定
                        </view>
                    </view> -->

                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'

    export default {
        computed: {
            ...mapState('m_user', ['flowType'])
        },
        data() {
            return {
                tipsText: '', // 错误文案提示
                tempImg: '', // 本地图片路径
                BASE_API: '',
                cameraEngine: null, // 相机引擎
                devicePosition: false, // 摄像头朝向
                isAuthCamera: true, // 是否拥有相机权限
            }
        },
        mounted() {
            this.initData()
        },
        methods: {
            ...mapMutations('m_user', ['updateContractId', 'updateFlowType']),
            // 初始化相机引擎
            initData() {
                // #ifdef MP-WEIXIN
                // 1、初始化人脸识别
                wx.initFaceDetect()
                // 2、创建 camera 上下文 CameraContext 对象
                this.cameraEngine = wx.createCameraContext()
                // 3、获取 Camera 实时帧数据
                const listener = this.cameraEngine.onCameraFrame((frame) => {
                    if (this.tempImg) {
                        return;
                    }
                    // 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
                    wx.faceDetect({
                        frameBuffer: frame.data,
                        width: frame.width,
                        height: frame.height,
                        enablePoint: true,
                        enableConf: true,
                        enableAngle: true,
                        enableMultiFace: true,
                        success: (faceData) => {
                            let face = faceData.faceInfo[0]
                            if (faceData.x == -1 || faceData.y == -1) {
                                this.tipsText = '检测不到人'
                            }
                            if (faceData.faceInfo.length > 1) {
                                this.tipsText = '请保证只有一个人'
                            } else {
                                const {
                                    pitch,
                                    roll,
                                    yaw
                                } = face.angleArray;
                                const standard = 0.5
                                if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard ||
                                    Math.abs(yaw) >= standard) {
                                    this.tipsText = '请平视摄像头'
                                } else if (face.confArray.global <= 0.8 || face.confArray.leftEye <=
                                    0.8 || face.confArray.mouth <= 0.8 || face.confArray.nose <=
                                    0.8 ||
                                    face.confArray.rightEye <= 0.8) {
                                    this.tipsText = '请勿遮挡五官'
                                } else {
                                    this.tipsText = '请拍照'
                                    timerId = setTimeout(() => {
                                        // 这里可以写自己的逻辑了
                                        this.handleTakePhotoClick()
                                    }, 1000);
                                }
                            }
                        },
                        fail: (err) => {
                            if (err.x == -1 || err.y == -1) {
                                this.tipsText = '检测不到人'
                            } else {
                                this.tipsText = err.errMsg || '网络错误，请退出页面重试'
                            }
                        },
                    })
                })
                // 5、开始监听帧数据
                listener.start()
                // #endif
            },
            // 切换设备镜头
            handleChangeCameraClick() {
                this.devicePosition = !this.devicePosition;
            },

            // 拍照点击
            handleTakePhotoClick() {
                uni.getSetting({
                    success: (res) => {
                        if (!res.authSetting['scope.camera']) {
                            this.isAuthCamera = false
                            uni.openSetting({
                                success: (res) => {
                                    if (res.authSetting['scope.camera']) {
                                        this.isAuthCamera = true;
                                    }
                                }
                            })
                        }
                    }
                })
                this.cameraEngine.takePhoto({
                    quality: "high",
                    success: ({
                        tempImagePath
                    }) => {
                        this.tempImg = tempImagePath
                        this.updateFlowType('S')
                    }
                })
            },
            // 点击确定上传
            handleOkClick() {
                //  这里的 this.tempImg 是经过人脸检测后  拍照拿到的路径  
                this.upLoadOne(this.tempImg)
                uni.navigateBack({
                    delta: 1
                });
            },
            upLoad(tempFilePaths) {
                // #  注意  这里上传图片拿到的tempFilePaths是一个数组啊
                // 图片上传
                uni.showLoading({
                    title: "上传中，请稍后...",
                });
                let proAll = [];
                tempFilePaths.forEach((item) => {
                    console.log(item, '打印item')
                    proAll.push(this.upLoadOne(item));
                });
                Promise.all(proAll).then((res) => {
                    // 上传完成
                    uni.hideLoading();
                });
            },
            upLoadOne(imgPath) {
                //  然后这里imgPath 传过来的是 要上传的临时本地图片的路径
                //  具体上传方法根据自己的请求方式   请求自己的接口
            },
            // 点击 - 取消上传
            handleCancelClick() {
                this.tempImg = ''
            },
            // 点击 - 人脸安全保障按钮
            handleJumpSecurityClick() {

                uni.showToast({
                    icon: "none",
                    title: "假装跳转人脸安全保障",
                    duration: 2000,
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-content {
        width: 100%;
        height: 100%;

        .containerV {
            width: 100%;
            height: 100%;

            .headerV {
                .top-tips1 {
                    margin-top: 60rpx;
                    color: #1C1C1C;
                    font-size: 36rpx;
                    text-align: center;
                }

                .top-tips2 {
                    margin-top: 20rpx;
                    color: #00AAFF;
                    font-size: 28rpx;
                    text-align: center;
                }
            }

            .contentV {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 661rpx;
                margin-top: 30rpx;

                .tipV {
                    bottom: 30rpx;
                    position: absolute;
                    line-height: 90rpx;
                    padding-left: 24rpx;
                    padding-right: 24rpx;
                    max-width: calc(100vw - 50rpx * 2);
                    text-align: center;
                    font-size: 30rpx;
                    background: #000000;
                    opacity: 0.75;
                    color: #FFFFFF;
                    border-radius: 16rpx;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    z-index: 5;
                }

                .camera {
                    width: 400upx;
                    height: 400upx;
                    border-radius: 50%;
                }

                .mark {
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 2;
                    width: 750rpx;
                    height: 100%;
                    // background:deeppink;
                    background-size: 750rpx 661rpx;
                }

                image {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    z-index: 3;
                }
            }

            .footerV {
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;

                .privacyV {
                    padding-top: 30rpx;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;

                    .text {
                        font-size: 30rpx;
                        color: #1C1C1C;
                        text-align: center;
                        line-height: 42rpx;
                        margin-left: 15rpx;

                        text {
                            font-size: 30rpx;
                            color: #00AAFF;
                            text-align: center;
                            line-height: 42rpx;
                        }
                    }

                    .icon {
                        width: 40rpx;
                        height: 47rpx;
                        background: green;
                        background-size: 100% auto;
                    }
                }

                .bottom-tips-2 {
                    margin-top: 20rpx;
                    color: #999999;
                    text-align: center;
                    font-size: 26rpx;
                }

                .take-photo-bgV {
                    width: 100%;
                    margin-top: 30rpx;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;

                    .btn-take-photo {
                        margin: 0rpx 80rpx 0rpx 80rpx;
                        width: 196rpx;
                        height: 196rpx;
                        background: yellow;
                        background-size: 100% auto;
                    }

                    .btn-change-upload {
                        left: 130rpx;
                        width: 80rpx;
                        height: 80rpx;
                        background: blue;
                        background-size: 100% auto;
                    }

                    .btn-change-camera {
                        right: 130rpx;
                        width: 80rpx;
                        height: 80rpx;
                        background: red;
                        background-size: 100% auto;
                    }
                }

                .confirmV {
                    margin: 200rpx 100rpx 0rpx 100rpx;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;

                    .btn-cancel {
                        font-size: 32rpx;
                        color: #1C1C1C;
                    }

                    .btn-ok {
                        font-size: 32rpx;
                        color: #00AAFF;
                    }
                }
            }
        }
    }
</style>